<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/sui-append.min.css">
    <link rel="stylesheet" href="css/sui.min.css">
    <script src="js/sui.min.js"></script>

</head>
<body>
<button data-toggle="modal" data-target="#myModal" data-keyboard="false" class="sui-btn btn-primary btn-lg">对话框已写入html</button>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                <h4 id="myModalLabel" class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">我是内容body</div>
            <div class="modal-footer">
                <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">可自定ok</button>
                <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">可自定dismiss</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#myModal').on('okHide', function(e){console.log('okHide')})
    $('#myModal').on('okHidden', function(e){console.log('okHidden')})
    $('#myModal').on('cancelHide', function(e){console.log('cancelHide')})
    $('#myModal').on('cancelHidden', function(e){console.log('cancelHidden')})
</script>
</body>
</html>